<template>
	<scroll-view scroll-y="true">
		<view class="detail2-container">
			<view class="item-card top-view">
				<view class="top-image">
					<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_top_text.png" mode="heightFix"></image>
				</view>
				<view class="sub-text">
					2000群正在同步转发 267人正在参与派发
				</view>
				<view class="timer-view">
					<view class="text">本轮倒计时</view>
					<uni-countdown :show-day="false" :font-size="12" :hour="nextBatch['hour']" :minute="nextBatch['minute']" :second="nextBatch['second']" color="#875CFF"
						background-color="#FFFFFF" splitorColor="#FFFFFF" />
				</view>
				
				<view class="button-view">
					<view class="button-text" :class="{'big-button-text':isBigType}" @click="clickJoin">
						立即报名
					</view>
					<view class="right-text">
						领取你的专属cp
					</view>
				</view>
				<view class="right-image">
					<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_top_people.png" mode="heightFix"></image>
				</view>
			</view>
			<!-- <view class="item-card avatar-view">
				<view class="image-view">
					<image :src="avatar" mode="aspectFill" @click="clickPhoto(avatar)"></image>
				</view>
				<view class="nick-name">
					{{userInfo["nick_name"] || ""}}
					<view class="age-sex-c" :class="{'age-woman-sex':userInfo.sex == 'F'}">
						<image  class="sex-img" :src="getSexImg(userInfo)" mode="aspectFit"></image>
						<view class="sex-title" :class="{'sex-woman-title':userInfo.sex == 'F'}">{{getTaAges(userInfo.birthday)}}</view>
					</view>
					<image v-if="userInfo['certificated']" src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_shiming.png" mode="heightFix"></image>
				</view>
				<view class="des">
					TA正在参与本轮派发哦，转发赢金币
				</view>
				<image class="yinhao-image" src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_yinhao.png" mode="heightFix"></image>
			</view> -->
			<view class="item-card-1 avatar-main-view">
				<view class="image-view">
					<image :src="avatar" mode="widthFix" @click="clickPhoto(avatar)"></image>
				</view>
				<view class="container-r-1">
					<view class="container-c-1">
						<view class="container-r-2">
							{{userInfo["nick_name"] || ""}}
							<view class="age-sex-c" :class="{'age-woman-sex':userInfo.sex == 'F'}">
								<image  class="sex-img" :src="getSexImg(userInfo)" mode="aspectFit"></image>
								<view class="sex-title" :class="{'sex-woman-title':userInfo.sex == 'F'}">{{getTaAges(userInfo.birthday)}}</view>
							</view>
						</view>
						<view class="container-r-2">
							<view class="title-share">
								<view class="">
									帮TA转发赢
								</view>
								<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/meigui.png" mode="aspectFit"></image>
								<view class="">
									币，可兑换“京东卡”
								</view>
							</view>
						</view>
					</view>
					<view class="share-card-view" @click="clickSharePerson">
						立即转发
						<button id="share-card-btn" open-type="share" ></button>
					</view>
				</view>
				<view class="renzheng-view">
					<view class="status-view">
						<image v-if="userInfo['certificated']" src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/rz_shiming_y.png" mode="aspectFit"></image>
						<image v-if="!userInfo['certificated']" src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/rz_shiming_n_1.png" mode="aspectFit"></image>
						实名认证
					</view>
					<view class="status-view">
						<image v-if="userInfo['mobile'].length > 0" src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/rz_shouji_y.png" mode="aspectFit"></image>
						<image v-if="!(userInfo['mobile'].length > 0)" src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/rz_shouji_n_1.png" mode="aspectFit"></image>
						手机号认证
					</view>
					<view class="status-view">
						<image v-if="userInfo['wechat_no'].length > 0" src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/rz_weixin_y.png" mode="aspectFit"></image>
						<image v-if="!(userInfo['wechat_no'].length > 0)" src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/rz_weixin_n_1.png" mode="aspectFit"></image>
						微信认证
					</view>
					<view class="status-view">
						<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/rz_shipin_n.png" mode="aspectFit"></image>
						视频认证
					</view>
				</view>
			</view>
			<view class="item-card info-view">
				<view class="card-title">
					<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_info.png" mode="aspectFit"></image>
					个人资料
				</view>
				<view class="info-cell">
					<view class="tags-title">
						<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_t1.png" mode="aspectFit"></image>
					</view>
					<view class="tags-view">
						<view class="info-tag" v-for="tag in getInfoTagList1()" >
							{{tag}}
						</view>
					</view>
				</view>
				<view class="info-cell">
					<view class="tags-title">
						<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_t2.png" mode="aspectFit"></image>
					</view>
					<view class="tags-view">
						<view class="info-tag" v-for="tag in getInfoTagList2()" >
							{{tag}}
						</view>
					</view>
				</view>
				<view class="info-cell">
					<view class="tags-title">
						<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_t3.png" mode="aspectFit"></image>
					</view>
					<view class="tags-view">
						<view class="info-tag" v-for="tag in getInfoTagList3()" >
							{{tag}}
						</view>
					</view>
				</view>
				<view class="des-view">
					<view class="image-view">
						<image v-if="userInfo.soliloquy.length > 0" src="https://static.kuaimayoupin.com/000000_kt_xcx/match-list/match_heart.png" mode="aspectFit"></image>
					</view>
					{{userInfo.soliloquy || ""}}
				</view>
			</view>
			<view class="item-card info-view">
				<view class="card-title">
					<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_lover.png" mode="aspectFit"></image>
					TA的理想型CP
				</view>
				<view class="info-cell">
					<view class="tags-title">
						<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_t1.png" mode="aspectFit"></image>
					</view>
					<view class="tags-view">
						<view class="info-tag" v-for="tag in getLoverTagList1()" >
							{{tag}}
						</view>
					</view>
				</view>
				<view class="info-cell">
					<view class="tags-title">
						<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_t2.png" mode="aspectFit"></image>
					</view>
					<view class="tags-view">
						<view class="info-tag" v-for="tag in getLoverTagList2()" >
							{{tag}}
						</view>
					</view>
				</view>
				<view class="info-cell">
					<view class="tags-title">
						<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_t3.png" mode="aspectFit"></image>
					</view>
					<view class="tags-view">
						<view class="info-tag" v-for="tag in getLoverTagList3()" >
							{{tag}}
						</view>
					</view>
				</view>
			</view>
			<view class="item-card talkings-view">
				<view class="card-title">动态</view>
				<view class="talking-card" v-for="talk in talkings">
					<view class="note">
						{{talk["note"] || ""}}
					</view>
					<view class="photos">
						<view class="photo-one" v-if="talk['pic_urls'].length == 1" v-for="pic in talk['pic_urls']" >
							<image :src="pic" mode="aspectFill" @click="clickPhoto(pic)"></image>
						</view>
						<view class="photo-two" v-if="(talk['pic_urls'].length == 2) || (talk['pic_urls'].length == 4)" v-for="pic in talk['pic_urls']" >
							<image :src="pic" mode="aspectFill" @click="clickPhoto(pic)"></image>
						</view>
						<view class="photo-three" v-if="(talk['pic_urls'].length != 1) && (talk['pic_urls'].length != 2) && (talk['pic_urls'].length != 4)" v-for="pic in talk['pic_urls']" >
							<image :src="pic" mode="aspectFill" @click="clickPhoto(pic)"></image>
						</view>

					</view>
				</view>
			</view>
			<view class="footer-view">
				<!-- <view class="left-view" @click="clickFooterLeft">
					<view class="title" v-if="!isPaySucess">
						59元牵线(不成功退还)
					</view>
					<view class="sub-title" v-if="!isPaySucess">
						是我的理想型，不想错过
					</view>
					<view class="large-title" v-if="isPaySucess">
						已牵线
					</view>
				</view> -->
				<!-- <view class="right-view" @click="clickFooterRight">
					<view class="title">
						帮TA转发赢
						<span>
							<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_meigui.png" mode="aspectFit"></image>
						</span>
						币
					</view>
					<view class="sub-title">
						可兑换“京东卡”
					</view>
					<button id="shareBtn" open-type="share" ></button>
				</view> -->
				<view v-if="userInfo['wechat_no'].length > 0"  class="left-view" @click="clickFooterLeft">
					<view class="title">
						点击获取微信
					</view>
					<view class="sub-title" v-if="isLogin">
						今日剩余{{wechatCount}}次
					</view>
					<view class="sub-title" v-if="!isLogin">
						需要登录账号
					</view>
				</view>
				<view class="right-view" @click="clickFooterRight">
					<view class="title">
						免费加好友
					</view>
					<view class="sub-title">
						前往APP查看
					</view>
				</view>
			</view>
			<view class="share-view" v-if="isShowShare">
				<view class="center-view" @click="clickCloseShare">
					<image src="https://static.kuaimayoupin.com/000000_kt_xcx/home/detail/detail_share.png" mode="widthFix"></image>
				</view>e
			</view>
			<loginDialog
			  :isShow="isShowLogin"
			  @goProtocol="goProtocol"
			></loginDialog>
		</view>
	</scroll-view>
</template>

<script>
	import {
	  getInfoById,
	  getTalkingTipListById,
	  greetSend,
	} from "@/api/home/home.js";
	import {
		getInfo,
		talkingTipList, 
		customizeLoverInfo, 
	} from "@/api/user/user.js"; 
	
	import { getWechatCount, getWechatSend } from "@/api/activity/activity.js";
	
	
	import{ makeMatchOrder,activityShare,getWxPay } from "@/api/order/order.js";
	
	import { getAges,getAgesYear } from "../../../util/tool";
	import {
		home_bar_bg,
		paifa_icon,
		ta_sex_man,
		ta_sex_woman,
		home_auth_icon
	} from '@/pages/home2/home_image_tool.js';
	
	import loginDialog from "@/components/login/login-dialog.vue";
	import { EventBus } from "@/util/event-bus.js";
	

	
	export default {
		components: {
		},
		onHide() {
		},
		data() {
			return {
				isBigType: false,
				isShowLogin: false,
				isLogin: false,
				barstatusH: 0,
				avatar:"",
				userInfo: {},
				loverInfo: {},
				talkings:[],
				isShowShare:false,
				isPaySucess:false,
				nextBatch:{
					"hour":0,
					"minute":0,
					"second":0,
				},
				wechatCount:0,
			};
		},
		created() {
			let that = this;
			EventBus.$on('loginSuccess', function(res) {
				console.log("wxkmanager-pohone-333222--", res);
				that.loginAccountSuccess(); 
			});
		},
		onLoad(option) {
		  let pages = getCurrentPages();
		  this.pagesLength = pages.length;
		  this.user_id = option.user_id || "";
		  // this.user_id = "7dd391c0-c56c-11ec-8221-1f5c68ea8d92";
		  
		  this.getHeight();
		  this.checkIslogin();
		  this.getPersonInfo();
		  this.loadCustomizeInfo();
		  this.getTalkingTipListByIdRequest();
		  this.getLeaveTime();
		  this.getWechatCountInfo();
		  // this.startRotate();
		},
		mounted() {
		},
		onShow() {
		},
		onShareAppMessage() {
			let that = this;
			let shareTitle = that.getShareTitle();
		    const promise = new Promise(resolve => {
		      setTimeout(() => {
		        resolve({
		          title: shareTitle,
		          path: url,
		          imageUrl:that.userInfo.avatar
		        })
		      }, 2000)
		    })
			let url = "/pages/home2/detail2/detail2?user_id=" + this.user_id;
		    return {
		      title: shareTitle, 
		      path: url,
			  imageUrl:that.userInfo.avatar, 
		      promise 
		    };
		},
		methods: {
			getShareTitle(){
				var result = "Hi,我是";
				result += this.userInfo.nick_name || "";
				result += ",";
				if(this.userInfo.birthday.length > 0){
					result += this.getTaAgesYear(this.userInfo.birthday); 
					result += "·"
				}
				if(this.userInfo.height.length > 0){
					result += this.userInfo.height;
					result += "cm·"
				}
				if(this.userInfo.job.length > 0){
					result += this.userInfo.job;
					result += "·"
				}
				if(this.userInfo.education.length > 0){
					result += this.userInfo.education;
					result += ","
				}
				result += "喜欢我就加我好友吧!"
				return result;
			},
			getWechatCountInfo(){
				getWechatCount({}).then((res) => {
					if (res.status == 1) {
						let that = this;
						that.wechatCount = res.data.count;
					}
				});
			},
			startRotate() {
			  this.timer = setInterval(() => {
			    this.isBigType = !this.isBigType;
			  }, 500);
			},
			getTaAgesYear(birthday) {
			  let birthdayStr = birthday || "";
			  if (birthdayStr == "") {
			    return "";
			  } else {
			    return getAgesYear(birthdayStr);
			  }
			},
			getTaAges(birthday) {
			  let birthdayStr = birthday || "";
			  if (birthdayStr == "") {
			    return "";
			  } else {
			    return getAges(birthdayStr);
			  }
			},
			getSexImg(userInfo){
				console.log(userInfo);
				return this.userInfo.sex == "F" ? ta_sex_woman : ta_sex_man;
			},
			checkIslogin(){
				if (uni.getStorageSync("token")) {
				  this.isShowLogin = false;
				  this.isLogin = true;
				}
			},
			loginDismiss() {
			  this.isShowLogin = false;
			  this.checkIslogin();
			},
			goProtocol(type) {
			  uni.navigateTo({
			    url: "/pageA/protocol/protocol?type=" + type,
			  });
			},
			clickPhoto(url){
				uni.previewImage({
					current: 0,
					urls: [url]
				});
			},
			clickJoin(){
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			clickCloseShare(){
				this.isShowShare = false;
			},
			clickSharePerson(){
				activityShare({}).then((res) => {
					if (res.status == 1) {
						let that = this;
						console.log("this.sharePersonSuccess");
						EventBus.$emit("sharePersonSuccess", true);
						setTimeout(function(){
						  // console.log("this.isShowShare222");
						  that.isShowShare = true;
						},4000);
					}
				});
			},
			clickFooterRight(){
				if(!this.isLogin){
					this.isShowLogin = true;
					return;
				}
				if (this.canNotZhuanfa()) {
					this.toHandleBaomingNext();
					return;
				}
				greetSend({
					"user_id": this.user_id,
					"note": "茫茫人海，有缘认识一下",
				}).then(res => {
					if (res.status == 1) {
						uni.showModal({
							showCancel: false,
							title: '温馨提示',
							content: '恭喜小主，你们已成为好友，立即前往APP与ta畅聊',
							confirmText: "去聊天",
							success: function(res) {
								uni.navigateTo({
									url: "/pages/download/app_download/app_download", 
								});
							}
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.message || "招呼失败"
						});
					}
				})
			},
			clickFooterLeft(){
				if(!this.isLogin){
					this.isShowLogin = true;
					return;
				}
				if (this.canNotZhuanfa()) {
					this.toHandleBaomingNext();
					return;
				}
				if(this.wechatCount <= 0){
					if(this.isVip()){
						uni.showToast({
							icon: 'none',
							title: '今日剩余次数不足，请明日再来'
						});
					}else{
						uni.navigateTo({
							url: "/pageA/vip/vip",
						});
					}
					return;
				}
				getWechatSend({userid:this.user_id}).then((res) => {
					if (res.status == 1) {
						uni.showModal({
							showCancel: false,
							title: '温馨提示',
							content: '恭喜小主，微信号已发送，请前往APP查看',
							confirmText: "去查看",
							success: function(res) {
								uni.navigateTo({
									url: "/pages/download/app_download/app_download",
								});
							}
						});
						this.getWechatCountInfo();
					}
				});
			},
			// clickFooterLeft(){
			// 	if(!this.isLogin){
			// 		this.isShowLogin = true;
			// 		return
			// 	}
			// 	if(this.isPaySucess){
			// 		return;
			// 	}
			// 	makeMatchOrder({matcherId:this.user_id}).then(res => {
			// 		if (res.status == 1) {
			// 			const order_id = res.data["order_id"] || ""; 
			// 			getWxPay({
			// 				order_id,
			// 				trade_type: 'miniapp'
			// 			}).then((res) => {
			// 				const payInfo = res.data;
			// 				const _this = this
			// 				uni.requestPayment({
			// 					...payInfo,
			// 					success: () => {
			// 						uni.showToast({
			// 							icon: 'none',
			// 							title: '支付成功'
			// 						});
			// 						this.isPaySucess = true;
			// 					},
			// 					fail: res => {
			// 						uni.showToast({
			// 							icon: 'none',
			// 							title: '取消支付'
			// 						});
			// 						this.isPaySucess = true;
			// 						// this.isPaySucess = false;
			// 					},
			// 				});
			// 			});
			// 		}
			// 	});
			// },
			getPersonInfo() {
			  let that = this;
			  getInfoById({
			    user_id: this.user_id,
			  }).then((res) => {
			    if (res.status == 1) {
			      console.log("personal----userInfo======", res.data);
				  that.avatar = res.data.avatar;
			      that.userInfo = res.data;
			    }
			  });
			},
			loadCustomizeInfo() {
			  customizeLoverInfo({ user_id: this.user_id }).then((res) => {
			    if (res.status == 1) {
			      this.loverInfo = res.data;
			    }
			  });
			},
			getTalkingTipListByIdRequest() {
			  let that = this;
			  getTalkingTipListById({
			    user_id: this.user_id,
			  }).then((res) => {
			    if (res.status == 1) {
			      console.log("getTalkingTipListById======", res.data);
			      that.talkings = res.data.talkingTips;
			    }
			  });
			},
			getInfoTagList1(){
				let info = this.userInfo;
				if(info == null){return []}
				return ["年龄："+ this.getAges(info.birthday),
						"身高："+info.height + "cm",
						"学历："+info.education,
						];
			},
			getInfoTagList2(){
				let info = this.userInfo;
				if(info == null){return []}
				return ["婚况："+info.marital_status,
						"工作地："+info.work_place,
						];
			},
			getInfoTagList3(){
				let info = this.userInfo;
				if(info == null){return []}
				return ["工作："+info.job + "(" + info.work_type + ")",
						"月收入："+ info.salary || "",
						];
			},
			getLoverTagList1(){
				let info = this.loverInfo;
				if(info == null){return []}
				return ["年龄："+((info.age == "-1" ? "不限" : info.age )|| ""),
						"身高："+(info.height == "-1" ? "不限" : info.height || ""),
						"学历："+(info.education["label"] || ""),
						];
			},
			getLoverTagList2(){
				let info = this.loverInfo;
				if(info == null){return []}
				return ["婚况："+(info.marital_status["label"] || ""),
						"工作地："+info.work_place,
						];
			},
			getLoverTagList3(){
				let info = this.loverInfo;
				if(info == null){return []}
				return ["月收入："+(info.salary["label"] || ""),
						];
			},
			getAges(birthday) {
			  let birthdayStr = birthday || "";
			  if (birthdayStr == "") {
			    return "";
			  } else {
			    return getAges(birthdayStr);
			  }
			},
			// 获取微信右上角胶囊高度
			getHeight() {
				let res = wx.getMenuButtonBoundingClientRect();
				this.barstatusH = res.bottom + 8;
			},
			getLeaveTime(){
				var date = new Date();
				var now = date.getTime();
				let hour = date.getHours();
				
				date.setHours(0);
				date.setMinutes(0);
				date.setSeconds(0);
				var leveSeconds = 0;
				if(hour < 20){
					var t2 = new Date(date.getTime() + 1000 * 60 * 60 * 20);
					leveSeconds = parseInt((t2-now) / 1000);
				}else{
					var t2 = new Date(date.getTime() + 1000 * 60 * 60 * 44);
					leveSeconds = parseInt((t2-now) / 1000);
				}
				
				let rHour = parseInt(leveSeconds / 3600);
				let rMinute = parseInt((leveSeconds % 3600) / 60);
				let rSeconds = leveSeconds % 60;
				
				this.nextBatch = {
					"hour":rHour,
					"minute":rMinute,
					"second":rSeconds,
				};				
			},
			loginAccountSuccess() {
				let that = this;
				that.isLogin = true;
				that.isShowLogin = false;
				getInfo().then((res) => {
				  if (res.status == 1) {
				    uni.setStorageSync("userInfo", res.data || {});
					that.loginSuccessNext();
				  }
				});
			},
			loginSuccessNext(){
				if (this.canNotZhuanfa()) {
					this.toHandleBaomingNext();
				}
			},
			canNotZhuanfa() {
				console.log("canNotZhuanfa");
				if (this.needComplete() || this.needCustomized() || this.needCertificated()) {
					return true;
				}
				return false;
			},
			toHandleBaomingNext() {
				if (this.needComplete()){
					this.toCompleteInformation();
				}
				if (this.needCustomized()){
					this.toCustomized();
				}
				if (this.needCertificated()){
					this.toCertificated();
				}
			},
			// 需要完善
			needComplete() {
				let userInfo = getApp().globalData.userInfo || {};
				let nickName = userInfo.nick_name || "";
				let height = userInfo.height || "";
				let work_place = userInfo.work_place || "";
				let job = userInfo.job || "";
				return (nickName == "" || height == "" || work_place == "" || job == "");
			},
			// 去完善资料
			toCompleteInformation() {
				// 完善
				uni.navigateTo({
					url: "/pageA/my-profile/my-profile-once",
				});
			},
			// 需要定制
			needCustomized() {
				let userInfo = getApp().globalData.userInfo || {};
				let customized = userInfo.customized || false;
				return customized == false
			},
			// 去定制
			toCustomized() {
				// 定制
				uni.navigateTo({
					url: "/pageA/my-profile/dingzhi?once=once",
				});
			},
			// 需要认证
			needCertificated() {
				let userInfo = getApp().globalData.userInfo || {};
				let certificated = userInfo.certificated || false;
				return certificated == false
			},
			toCertificated() {
				// 认证
				uni.navigateTo({
					url: "/pageA/realName/realName?once=once",
				});
			},
			// 需要认证
			isVip() {
				let userInfo = getApp().globalData.userInfo || {};
				let vip = userInfo.vip != "-1";
				return vip
			},
		},
	};
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}
	
	page {
		background-color: #ffffff;
	}
	.detail2-container{
		background-color: #FAFAFA;
		display: flex;
		flex-direction: column;
		
		.item-card{
			margin: 15rpx 30rpx ;
			padding: 30rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 16rpx rgba(0, 26, 118, 0.03);
		}
		.item-card-1{
			margin: 15rpx 30rpx ;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 16rpx rgba(0, 26, 118, 0.03);
		}
		
		.top-view{
			position: relative;
			display: flex;
			flex-direction: column;
			background: linear-gradient(276.11deg, #E8A4FF 1%, #A168FF 47.14%, #5F5DEB 95.52%);
			// height: 300rpx;
			.sub-text{
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				opacity: 0.7;
			}
			
			.timer-view{
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				
				
				.text{
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					margin-right: 10rpx;
				}
				.timer-text{
					font-weight: 400;
					font-size: 26rpx;
					color: #4044A3;
					width: 40rpx;
					height: 40rpx;
					background-color: #FFFFFF;
					margin: 0 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.button-view{
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				// justify-content: center;
				align-items: center;
				position: relative;
				
				.button-text{
					font-weight: 500;
					font-size: 30rpx;
					color: #4044A3;
					background-color: #FFFFFF;
					border-radius: 40rpx;
					padding: 10rpx 20rpx;
				}
				.big-button-text{
					padding: 10rpx 40rpx;
				}
				
				.right-text{
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					opacity: 0.7;
				}
			}
			
			.top-image{
				image{
					height: 40rpx;
				}
			}
			
			.right-image{
				position: absolute;
				right: 0;
				bottom: 0;
				image{
					width: 250rpx;
					height: 250rpx;
				}
			}
			
		}
		.avatar-main-view{
			.image-view{
				image{
					width: 100%;
					border-radius: 20rpx;	
				}
			}
			.renzheng-view{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				margin-bottom: 30rpx;
				
				.status-view{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;
					color: #999;
					
					image{
						width: 80rpx;
						height: 80rpx;
						// background-color: #4044A3;
						margin-bottom: 6rpx;
					}
				}
				
			}
			.container-r-1{
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				
				.share-card-view{
					border-radius: 60rpx;
					background-color: #FF5E6A;
					padding: 10rpx 20rpx;
					color:#fff;
					position: relative;
					
					#share-card-btn{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						right: 0;
						opacity: 0;
						background-color: #333;
					}
				}
				
				.container-c-1{
					display: flex;
					flex-direction: column;
					
					.container-r-2{
						display: flex;
						flex-direction: row;
						// align-items: flex-start;
						// justify-content: start;
						font-size: 36rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 10rpx;
						
						
						image{
							margin-left: 6rpx;
							height: 36rpx;
							
						}
						.title-share{
							font-size: 26rpx;
							color: #333;
							font-weight: 400;
							display: flex;
							flex-direction: row;
							
							image{
								margin:0 6rpx;
								margin-top: 8rpx;
								height: 25rpx;
								width: 25rpx;
							}
						}
						.age-sex-c{
							// margin-top: 14rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							padding: 0 10rpx;
							margin: 0 6rpx;
							background: rgba(74, 158, 255, 0.1);
							border-radius: 30rpx;
							height: 42rpx;
							.sex-img{
								width: 24rpx;
								height: 24rpx;
								margin-right: 4rpx;
							}
							.sex-title{
								font-weight: 400;
								font-size: 24rpx;
								line-height: 22rpx;
								letter-spacing: -0.3px;
								color: #4A9EFF;
							}
							.sex-woman-title{
								color: #FF5E98;
							}
						}
					}
				}
			}
		}
		
		// .avatar-view{
		// 	position: relative;
		// 	height: 340rpx;
		// 	display: flex;
		// 	flex-direction: column;
		// 	justify-content: center;
		// 	align-items: center;
		// 	background: linear-gradient(159.23deg, #E4E9FF -4.78%, rgba(229, 214, 255, 0) 77.36%);
			
		// 	.image-view{
		// 		width: 164rpx;
		// 		height: 164rpx;
		// 		border-radius: 100rpx;
		// 		border-color: #9D7EF3;
		// 		border-width: 2rpx;
		// 		border-style: solid;
		// 		display: flex;
		// 		justify-content: center;
		// 		align-items: center;
				
		// 		image{
		// 			width: 152rpx;
		// 			height: 152rpx;
		// 			border-radius: 100rpx;
		// 		}
		// 	}
			
			
		// 	.nick-name{
		// 		margin-top: 6rpx;
		// 		font-size: 40rpx;
		// 		color: #333;
		// 		font-weight: 500;
		// 		display: flex;
		// 		flex-direction: row;
		// 		align-items: center;
				
		// 		image{
		// 			margin-left: 6rpx;
		// 			height: 36rpx;
		// 		}
				
		// 		.age-sex-c{
		// 			// margin-top: 14rpx;
		// 			display: flex;
		// 			flex-direction: row;
		// 			align-items: center;
		// 			justify-content: center;
		// 			padding: 0 10rpx;
		// 			margin: 0 6rpx;
		// 			background: rgba(74, 158, 255, 0.1);
		// 			border-radius: 30rpx;
		// 			height: 42rpx;
		// 			.sex-img{
		// 				width: 24rpx;
		// 				height: 24rpx;
		// 				margin-right: 4rpx;
		// 			}
		// 			.sex-title{
		// 				font-weight: 400;
		// 				font-size: 24rpx;
		// 				line-height: 22rpx;
		// 				letter-spacing: -0.3px;
		// 				color: #4A9EFF;
		// 			}
		// 			.sex-woman-title{
		// 				color: #FF5E98;
		// 			}
		// 		}
		// 	}
		// 	.des{
		// 		margin-top: 6rpx;
		// 		font-size: 30rpx;
		// 		color: #333;
		// 	}
		// 	.yinhao-image{
		// 		width: 60rpx;
		// 		height: 60rpx;
		// 		position: absolute;
		// 		top: 40rpx;
		// 		left: 40rpx;
		// 	}
		// }
		
		.card-title{
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			color:#333;
			font-size: 35rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			
			image{
				width: 50rpx;
				height: 80rpx;
				margin-right: 10rpx;
			}
			
		}
		
		.info-view{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			
			.info-cell{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 20rpx;
				
				.tags-title{					
					image{
						height: 40rpx;
						width: 40rpx;
						margin-right: 15rpx;
					}
				}
				
				.tags-view{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					flex: 1;
				}
				
				.info-tag{
					font-size: 25rpx;
					padding: 6rpx 18rpx;
					background-color: #F4F4F4;
					border-radius: 40rpx;
					margin-right: 10rpx;
					margin-top: 5rpx;
					margin-bottom: 5rpx;
				}
			}
			.des-view{
				display: flex;
				
				margin-top: 10rpx;
				color: #666;
				font-size: 25rpx;
				
				image{
					margin-top: 4rpx;
					margin-right: 6rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		
		.talkings-view{
			margin-bottom: 200rpx;
			
			.card-title{
				margin: 0;
				color:#333;
				font-size: 35rpx;
				font-weight: 500;
			}
			.talking-card{
				margin: 0;
				margin-top: 30rpx;
				
				.note{
					color:#333;
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 20rpx;
				}
				.photos{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					
					.photo-one{
						image{
							// margin-right: 10rpx;
							width: 85vw;
							height: 400rpx;
							border-radius: 16rpx;
						}
					}
					.photo-two{
						image{
							margin-right: 10rpx;
							width: 40vw;
							height: 250rpx;
							border-radius: 16rpx;
						}
					}
					.photo-three{
						image{
							margin-right: 10rpx;
							width: 200rpx;
							height: 200rpx;
							border-radius: 16rpx;
						}
					}
				}
			}
		}
		
		.footer-view{
			// margin: 30rpx auto;
			width: 100%;
			position: fixed;
			bottom: 0;
			padding-top: 20rpx;
			padding-bottom: 60rpx;
			display: flex;
			background-color: #FAFAFA;
			align-items: center;
			justify-content: center;
			
			.left-view{
				// flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 60rpx;
				border-style: solid;
				border-color: #FF5E6A;
				border-width: 2rpx;
				padding: 10rpx 0rpx;
				width: 45%;
				margin-right: 10rpx;
				.title{
					font-weight: 500;
					font-size: 30rpx;
					color: #FF5E6A;
				}
				.sub-title{
					font-weight: 400;
					font-size: 20rpx;
					color: #FF5E6A;
				}
				.large-title{
					font-weight: 400;
					font-size: 32rpx;
					color: #FF5E6A;
					margin: 6rpx 0;
				}
			}
			.right-view{
				// flex: 1;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 60rpx;
				background-color: #FF5E6A;
				padding: 10rpx 0rpx;
				width: 45%;
				margin-left: 10rpx;
				position: relative;
				
				
				.title{
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
				}
				.sub-title{
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
				}
				image{
					width: 20rpx;
					height: 20rpx;
					margin-right: 2rpx;
				}
				#shareBtn {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					right: 0;
					opacity: 0;
					background-color: #333;
				}
			}
		}
		
		.top-status-container {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999999;
			width: 750rpx;
			box-sizing: content-box;
			background-color: white;
			// background-image: linear-gradient(159.23deg, #E4E9FF, rgba(229, 214, 255, 0) 77.36%);
		
			// .top-status {
			// 	position: relative;
			// 	left: 0;
			// 	top: 0;
			// 	width: 750rpx;
			// 	z-index: 999999;
		
			.bar-bg {
				width: 750rpx;
			}
		
			.top-status-paidx {
				width: 750rpx;
				bottom: 0rpx;
				height: 88rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 16px;
				z-index: 999999;
				position: absolute;
		
				.top-status-paidx-title {
					margin-left: 6px;
					font-weight: 400;
					font-size: 11px;
					line-height: 15px;
					color: #333333;
				}
		
				.paifa-icon {
					width: 89px;
					height: 22px;
				}
			}
		}
	}
	.share-view{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		
		.center-view{
			margin-bottom: 140rpx;
			
			image{
				width: 500rpx;
			}
		}
		
	}
</style>